<template>
  <div class="hotSearch" v-if="hotSearchList">
    <div class="hotTitle">热搜榜</div>
    <ul class="hotList">
      <template v-for="(item,index) in hotSearchList">
        <li :key="index" @click="goSinger(item.first)">
          <div class="listNumber" :class="{'colorActive':index<3}">{{index+1}}</div>
          <p class="songName" :class="{'fontActive':index<3}">{{item.first}}</p>
        </li>
      </template>
    </ul>

  </div>
</template>

<script>
export default {
  components: {},
  props: ["hotSearchList"],
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    goSinger(name){
      // this.$store.commit('getSingerName',name);
      // this.$http('/search',{
      //   params:{
      //     keywords:name,
      //     type:1018
      //   }
      // }).then(res=>{
      //   console.log(res);
      // })
    }
  },
  created() {},
  mounted() {
   
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.hotSearch {
  width: 100%;
  padding: vw(10);
  .hotTitle {
    font-size: vw(14);
    font-weight: bold;
    color: #000;
  }
  .hotList {
    li {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: vw(10) 0;
      .listNumber {
        width: vw(40);
        height: vw(20);
        line-height: vw(20);
        text-align: center;
        font-size: vw(20);
        color: #666;

      }
      .songName {
        font-size: vw(18);
        padding-left: vw(10);
      }
      .colorActive {
        color: red;
      }
      .fontActive {
        font-weight: bold;
      }
    }
  }
}
</style>